﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="">
    <meta name="keywords" content="0">
    <title>${wxAccountInfo.name}</title>
	<link rel="stylesheet" href="${s.base}/mobile/css/style.css">
	<link rel="stylesheet" href="${s.base}/js/layui/css/layui.css" media="all" />
	<script type="text/javascript" src="${s.base}/mobile/js/jquery.min.js"></script>
	<script type="text/javascript" src="${s.base}/js/layui/layui.js"></script>
	<script type="text/javascript" src="${s.base}/js/echart/echarts.min.js"></script>
    <style type="text/css">

                   body {
	             
                        background:#0099cc;
                        width:100%; 
                        height:100%; 
                   
                    }

		#head{width: 96%;height: 80px;margin-left: 2%;}
		#head ul{width: 100%;}
		#head ul li{float: left;line-height: 80px;}
		#head ul .title{width: 50%; text-align: center;font-size: 30px;color:#ffffff;font-weight: bold;}
		#head ul .btn{width: 50%; text-align: right;line-height: 80px;}
		#head ul .btn input{float: right; margin-right: 5%; width: 40%; height: 36px; margin-top: 22px;font-size: 18px;color:#ffffff;}
		#content{width: 96%;margin-left: 2%;}
		#content .team{width: 100%; min-height: 400px; height:auto;}
		#content .team_top table{width: 100%; }
		#content .team_top table tr td{line-height: 40px;font-size: 20px;color: #ffffff; width: 25%;}

		
		.font1{font-size: 20px;color:#ffffff;}
		.red{color:#FF0000;}
		.org{color:#F77303;}
		.gree{color:#9AFC02;}
	</style>
</head>

<body style="max-width:640px;">
   <!--<div style="position:absolute; width:100%; height:100%; z-index:-1"> 
	<img style="position:fixed;" src="${s.base}/mobile/img/head-bg.png" height="100%" width="100%" />
   </div>-->
  
  <div id="head">
  	<ul>
  		<li class="title">
  			${wxAccountInfo.name}
  		</li>
  		<li class="btn">
  			<input type="button" onClick="window.location.href='/phone/device/${openid}?id=${id}&wxId=${wxId}'" class="layui-btn layui-btn-radius layui-btn-normal" value="返回"/>
  		</li>
  	</ul>
  </div>
  <div id="content">
  	<div class="team_top">
  		<table>
  			<tr>
  				<td align="right" class="font1">类型:</td>
  				<td align="left"  class="font1">
					<select id="code" onchange="change()" class="content_top select">
						<option <#if !(deviceType=="1"||deviceType=="2"||deviceType=="3"||deviceType=="4"||deviceType=="5"||deviceType=="6"||deviceType=="14"||deviceType=="15"||deviceType=="16"||deviceType=="18")>style="display:none;"</#if> <#if code=="AQI">selected</#if> value="AQI">AQI</option>
						<option <#if !(deviceType=="1"||deviceType=="2"||deviceType=="3"||deviceType=="4"||deviceType=="5"||deviceType=="6"||deviceType=="14"||deviceType=="15"||deviceType=="16"||deviceType=="18")>style="display:none;"</#if> <#if code=="PM2">selected</#if> value="PM2">PM2.5</option>
						<option <#if !(deviceType=="1"||deviceType=="2"||deviceType=="3"||deviceType=="4"||deviceType=="5"||deviceType=="6"||deviceType=="14"||deviceType=="15"||deviceType=="16"||deviceType=="18")>style="display:none;"</#if> <#if code=="PM1">selected</#if> value="PM1">PM1</option>
						<option <#if !(deviceType=="1"||deviceType=="2"||deviceType=="3"||deviceType=="4"||deviceType=="5"||deviceType=="6"||deviceType=="14"||deviceType=="15"||deviceType=="16"||deviceType=="18")>style="display:none;"</#if> <#if code=="PM10">selected</#if> value="PM10">PM10</option>
						<option <#if !(deviceType=="1"||deviceType=="2"||deviceType=="3"||deviceType=="7"||deviceType=="11"||deviceType=="12"||deviceType=="13"||deviceType=="15")>style="display:none;"</#if> <#if code=="HCHO">selected</#if> value="HCHO">HCHO</option>
						<option <#if !(deviceType=="9"||deviceType=="10")>style="display:none;"</#if> <#if code=="O2">selected</#if> value="O2">O2</option>
						<option <#if !(deviceType=="1"||deviceType=="2"||deviceType=="5"||deviceType=="6"||deviceType=="8"||deviceType=="10"||deviceType=="14")>style="display:none;"</#if> <#if code=="CO2">selected</#if> value="CO2">CO2</option>

						<option <#if !(deviceType=="1"||deviceType=="2"||deviceType=="3"||deviceType=="4"||deviceType=="5"||deviceType=="6"||deviceType=="7"||deviceType=="8"||deviceType=="9"||deviceType=="10"||deviceType=="11"||deviceType=="12"||deviceType=="13"||deviceType=="17"||deviceType=="18")>style="display:none;"</#if> <#if code=="TEMP">selected</#if> value="TEMP">TEMP</option>
						<option <#if !(deviceType=="1"||deviceType=="2"||deviceType=="3"||deviceType=="4"||deviceType=="5"||deviceType=="6"||deviceType=="7"||deviceType=="8"||deviceType=="9"||deviceType=="10"||deviceType=="11"||deviceType=="12"||deviceType=="13"||deviceType=="17"||deviceType=="18")>style="display:none;"</#if> <#if code=="HIM">selected</#if> value="HIM">HUM</option>
						<option <#if !(deviceType=="1"||deviceType=="6"||deviceType=="7"||deviceType=="11"||deviceType=="12"||deviceType=="16")>style="display:none;"</#if> <#if code=="VOC">selected</#if> value="VOC">TVOC</option>


					</select>
  				</td>
  				<td align="right"  class="font1">时间:</td>
  				<td align="left" class="font1">
  					<select id="type" onchange="change()" class="select">
						<option  value="day" <#if type=="day">selected</#if>>天</option>
						<option  value="year"  <#if type=="year">selected</#if>>周</option>
						<option  value="month"  <#if type=="month">selected</#if>>月</option>

					</select>
  				</td>
  			</tr>
  			
  		</table>
  	</div>
  	<div id="currentDayDJL" class="team">
  		
  		
  	</div>
  </div>
   <!--js分享代码开始-->
   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
   <input type="hidden" value="${jSTicketShareResponse.appid}" id="appid" />
   <input type="hidden" value="${jSTicketShareResponse.fxTitle}" id="fxTitle" />
   <input type="hidden" value="${jSTicketShareResponse.fxImgUrl}" id="fxImgUrl" />
   <input type="hidden" value="${jSTicketShareResponse.fxDesc}" id="fxDesc" />
   <input type="hidden" value="${jSTicketShareResponse.fxUrl}" id="fxUrl" />
   <input type="hidden" value="${jSTicketShareResponse.nonceStr}" id="nonceStr" />
   <input type="hidden" value="${jSTicketShareResponse.timestamp}" id="timestamp" />
   <input type="hidden" value="${jSTicketShareResponse.signature}" id="signature" />
   <script src="${s.base}/mobile/js/share.js"></script>
   <!--js分享代码结束-->
  <script type="text/javascript">
	  function change() {
		  var code=$("#code").val();
          var type=$("#type").val();

          window.location.href='${s.base}/phone/deviceStatistics/${openid}?id=${id}&deviceId=${deviceId}&deviceType=${deviceType}&type='+type+'&code='+code+'&wxId=${wxId}';

      }


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('currentDayDJL'));

    // 指定图表的配置项和数据
    var option = {
		title : {
			text: '',
			x:'center',
			y:'bottom',
			textStyle:{
				fontSize: 18,
				fontWeight: 'bolder',
				color: '#FFFFFF'
			} 
		},
		color: ['#cc0000'],
		
		xAxis : [
			{
				type : 'category',
				boundaryGap : false,
				data : ${dataList},
				 axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
				axisLine:{
					lineStyle:{
						color: '#fff',
						width: 2,
						type: 'solid'
					}
				}
			}
		],
		yAxis : [
			{
				type : 'value',
				
				axisLabel : {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
					
                        },
				axisLine:{
					lineStyle:{
						 color: '#fff',
    width: 2,
    type: 'solid'
					}
				}
				
			}
		],
		series : [
			{
				name:'',
				type:'line',
				data:${dayList},
				itemStyle: {
					normal: {
					},
					emphasis: {
						textStyle:{
							fontSize: 18,
							fontWeight: 'bolder',
							color: '#FFFFFF'
						} 
					}
				},
				markPoint : {
					data : [
						{type : 'max', name: '最大值'},
						{type : 'min', name: '最小值'}
					]
				},
				markLine : {
					data : [
						{type : 'average', name: '平均值'}
					]
				}
			}
		]
	};
                    
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


</script>
</body>

</html>
